<template>
  <div
    class="avatar-container"
    :class="[
      `avatar-${size}`,
      {
        'avatar--clickable': clickable,
        'avatar--loading': loading
      }
    ]"
    :title="title"
    @click="handleClick"
  >
    <!-- 头像内容 -->
    <div class="avatar-content">
      <!-- 图片头像 -->
      <img
        v-if="src && !loading"
        :src="src"
        :alt="alt"
        class="avatar-image"
        @error="handleImageError"
        @load="handleImageLoad"
      />

      <!-- 默认头像（文字） -->
      <div
        v-else-if="!loading"
        class="avatar-default"
        :style="{ backgroundColor: backgroundColor }"
      >
        <span class="avatar-text">{{ displayText }}</span>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="avatar-loading">
        <div class="avatar-spinner"></div>
      </div>
    </div>

    <!-- 徽章/通知数量 -->
    <div
      v-if="
        badgeCount && (badgeCount === true || (typeof badgeCount === 'number' && badgeCount > 0))
      "
      class="avatar-badge"
      :class="{ 'avatar-badge--dot': badgeCount === true }"
    >
      <span v-if="badgeCount !== true">{{ formatBadgeCount(badgeCount) }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

// 定义组件属性
interface Props {
  // 头像图片源
  src?: string
  // 替代文本
  alt?: string
  // 尺寸
  size?: 'small' | 'medium' | 'large' | 'xlarge'
  // 是否可点击
  clickable?: boolean
  // 标题提示
  title?: string
  // 加载状态
  loading?: boolean
  // 默认头像文字
  fallbackText?: string
  // 背景颜色
  backgroundColor?: string
  // 徽章数量（true表示显示点，数字表示显示数量）
  badgeCount?: number | boolean
  // 用户名（用于生成默认头像）
  username?: string
}

// 定义事件
interface Emits {
  (e: 'click', event: MouseEvent): void
  (e: 'error', event: Event): void
  (e: 'load', event: Event): void
}

// 设置默认值
const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  clickable: false,
  loading: false,
  backgroundColor: '#3370ff'
})

const emit = defineEmits<Emits>()

// 计算属性
const displayText = computed(() => {
  if (props.fallbackText) return props.fallbackText
  if (props.username) return props.username.charAt(0).toUpperCase()
  return '?'
})

// 处理点击事件
const handleClick = (event: MouseEvent): void => {
  if (props.clickable) {
    emit('click', event)
  }
}

// 处理图片加载错误
const handleImageError = (event: Event): void => {
  emit('error', event)
}

// 处理图片加载成功
const handleImageLoad = (event: Event): void => {
  emit('load', event)
}

// 格式化徽章数量
const formatBadgeCount = (count: number | boolean): string => {
  if (count === true) return ''
  if (typeof count === 'number' && count > 99) return '99+'
  return count.toString()
}
</script>

<style scoped>
/* 头像容器 - 正方形圆角 */
.avatar-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  transition: all var(--transition-duration) var(--transition-timing-function);
}

/* 尺寸变体 */
.avatar-small {
  width: 24px;
  height: 24px;
}

.avatar-medium {
  width: 32px;
  height: 32px;
}

.avatar-large {
  width: 40px;
  height: 40px;
}

.avatar-xlarge {
  width: 48px;
  height: 48px;
}

/* 可点击状态 */
.avatar--clickable {
  cursor: pointer;
}

.avatar--clickable:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-small);
}

/* 加载状态 */
.avatar--loading {
  background-color: var(--background-color-tertiary);
}

/* 头像内容 - 正方形圆角 */
.avatar-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

/* 头像图片 - 正方形圆角 */
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 默认头像 - 正方形圆角 */
.avatar-default {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  color: white;
  border-radius: 8px;
}

/* 默认头像文字 */
.avatar-text {
  font-size: inherit;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  user-select: none;
}

/* 加载动画 - 正方形圆角 */
.avatar-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color-tertiary);
  border-radius: 8px;
}

.avatar-spinner {
  width: 50%;
  height: 50%;
  border: 2px solid var(--border-color-light);
  border-top: 2px solid var(--primary-color);
  border-radius: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 徽章 */
.avatar-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--error-color);
  color: white;
  font-size: var(--font-size-mini);
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  text-align: center;
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-badge--dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  padding: 0;
  border-radius: 50%;
}

/* 徽章尺寸调整 */
.avatar-small .avatar-badge {
  min-width: 12px;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  padding: 0 3px;
}

.avatar-small .avatar-badge--dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
}

.avatar-large .avatar-badge {
  min-width: 18px;
  height: 18px;
  font-size: var(--font-size-small);
  line-height: 18px;
  padding: 0 5px;
}

.avatar-large .avatar-badge--dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
}

.avatar-xlarge .avatar-badge {
  min-width: 20px;
  height: 20px;
  font-size: var(--font-size-small);
  line-height: 20px;
  padding: 0 6px;
}

.avatar-xlarge .avatar-badge--dot {
  width: 12px;
  height: 12px;
  min-width: 12px;
}

/* 深色主题适配 */
[data-theme='dark'] .avatar-default {
  background-color: var(--primary-color);
}

[data-theme='dark'] .avatar--loading {
  background-color: var(--background-color-secondary);
}

[data-theme='dark'] .avatar-spinner {
  border-color: var(--border-color-normal);
  border-top-color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .avatar-container {
    transition: none; /* 移动端禁用动画以提升性能 */
  }

  .avatar--clickable:hover {
    transform: none;
  }
}
</style>
